/**
 * @name: BreadCrumbs
 * @Description:底部面包屑
 * @Author: 方琦
 * @Date: 2022/8/15 10:15
 **/
import React, {useState} from 'react';
import {inject, observer} from "mobx-react";
import footer from "./footer.module.css";

function BreadCrumbs(props) {
    const {icon, title, bg, isActive, id} = props.item;
    const [isHover, setIsHover] = useState(false);
    //设置鼠标移入移出的样式
    const handleMouse = (flag) => {
        setIsHover(flag)
    }
    const handleClick = () => {
        props.menuStore.isDisplayStartMenu = false;
        props.menuStore.isDisPlayMenuItem(id, true);
        props.menuStore.isActiveMenuItem(id)
    }
    return (
        <div className={`${footer.left} ${footer.mianBaoXueItem}`}
             style={{backgroundColor: isActive ? '#3B3D3F' : isHover ? '#3B3D3F' : 'black'}}
             onMouseEnter={() => handleMouse(true)}
             onMouseLeave={() => handleMouse(false)}
             onClick={() => handleClick()}>
            <div className={`${footer.left} ${footer.leftIconDiv}`} style={{backgroundColor: bg}}>
                <span className={footer.icon + " iconfont " + icon}></span>
            </div>
            <span className={`${footer.left}`}>{title}</span>
        </div>
    )
}

export default inject("menuStore")(observer(BreadCrumbs))
